<script setup>
import CartCard from "@/components/CartCard.vue";
import { ref, computed ,toRaw} from 'vue'
import { useRoute, useRouter } from "vue-router";
import { useCarStore } from "@/stores/cart.js";
import { useOrderStore } from "@/stores/order.js";
const order = useOrderStore();


const cart = useCarStore();
const route = useRoute();
const router = useRouter();

console.log(cart.cartList);
//当前地址
const currentAddress = cart.currentAddress;
const shopName = route.query.shopName;

//查找购物车
const shopCart = cart.cartList.find((item) => item.name == shopName);
console.log(shopName);
// 地址页面跳转
const toAddress = () => {
  router.push({ path: "/address" });
};


// 选中的商品
const list = shopCart.list.filter((item) => item.checked);
// 实际支付金额
const totalPrice = computed(() => list.reduce((sum, current) => sum += current.price * current.number, 0).toFixed(2))
// 选中总数量
const totalCount = computed(() => list.reduce((sum, current) => sum += current.number, 0))
// 蒙版
const isshow = ref(false)

// 确认支付
const success = () => {
  let newOrder = {
    status: '已下单',
    shopCart: shopCart,
    totalPrice: totalPrice.value,
    totalCount: totalCount.value
  }
  order.orderList.push(newOrder)
  router.push({ path: '/order' }).then(() => {
    shopCart.list.forEach(item => item.number = 0);
    cart.cartList = cart.cartList.filter(item => item != shopCart)
  })


}

</script>

<template>
  <div class="order_confirmation">
    <div class="order_confirmation_header">
      <div class="order_confirmation_header_title">
        <span class="iconfont title_back" @click="router.back()">&#xe697;</span>
        <div class="title_text">确定订单</div>
      </div>
      <div class="order_confirmation_header_address" @click="toAddress">
        <div class="address_title">收货地址</div>
        <div class="current_address">
          <div class="current_address_info" v-if="currentAddress">
            <div>{{ currentAddress.city }} {{ currentAddress.department }} {{ currentAddress.houseNumber }}</div>
            <div>{{ currentAddress.name }} {{ currentAddress.phone }}</div>
          </div>
          <div class="current_address_info" v-else>暂无收货地址</div>
          <div class="iconfont current_address_icon">&#xe697;</div>
        </div>
      </div>
    </div>
    <div class="order_confirmation_content">
      <CartCard :list="list" :name="shopCart.name" />
    </div>
    <div class="order_confirmation_footer">
      <div class="total_price">实付金额: <b>￥{{ totalPrice }}</b></div>
      <div class="submit" v-if="currentAddress" @click="isshow = true">提交订单</div>
    </div>
    <!-- 蒙层 -->
    <div class="mask" v-if="isshow">
      <div class="mask_content">
        <div class="mask_content_title">确认要离开收银台?</div>
        <div class="mask_content_desc">请尽快完成支付,否则将被取消</div>
        <div class="mask_content_btn">
          <div class="btn cancel" @click="router.back()">取消订单</div>
          <div class="btn confirm" @click="success">确定支付</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.order_confirmation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #eee;

  &_header {
    padding: 0.18rem;
    height: 1.6rem;
    background-image: linear-gradient(0deg,
        rgba(0, 145, 255, 0) 4%,
        #0091ff 50%);
    background-size: 100% 1.6rem;
    background-repeat: no-repeat;

    &_title {
      display: flex;
      color: $bgColor;

      .title_back {
        font-size: 0.22rem;
      }

      .title_text {
        flex: 1;
        text-align: center;
        font-size: 0.16rem;
      }
    }

    &_address {
      padding: 0.18rem;
      background-color: $bgColor;
      margin-top: 0.28rem;
      line-height: 0.22rem;
      font-size: 0.16rem;
      color: $content_fontcolor;
      border-radius: 0.04rem;

      .address_title {
        margin-bottom: 0.18rem;
      }

      .current_address {
        display: flex;
        justify-content: space-between;

        &_info {
          div:last-child {
            font-size: 0.12rem;
          }
        }

        &_icon {
          transform: rotate(180deg);
          margin-right: 0.08rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }

  &_content {
    width: 100%;
    position: absolute;
    top: 2rem;
    bottom: 0.5rem;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  &_footer {
    height: 0.5rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $bgColor;
    line-height: 0.5rem;
    display: flex;

    .total_price {
      flex: 1;
      padding-left: 0.18rem;
    }

    .submit {
      width: 1rem;
      height: 0.5rem;
      background-color: $btn-bgColor;
      color: $bgColor;
      text-align: center;
      font-size: 0.14rem;
    }
  }

  // 蒙层
  .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    &_content {
      width: 80%;
      padding: 0.24rem;
      box-sizing: border-box;
      background-color: $bgColor;
      border-radius: 0.04rem;
      text-align: center;

      &_title {
        font-size: 0.18rem;
        font-weight: bold;
        color: $content_fontcolor;
      }

      &_desc {
        margin: 0.12rem 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $medium-fontColor;
      }

      &_btn {
        display: flex;
        justify-content: center;

        .btn {
          width: 0.8rem;
          height: 0.32rem;
          border-radius: 0.24rem;
          font-size: 0.14rem;
          line-height: 0.32rem;
        }

        .cancel {
          margin-right: 0.12rem;
          border: solid 0.01rem $btn-bgColor;
          color: $btn-bgColor;
        }

        .confirm {
          background-color: $btn-bgColor;
          color: $bgColor;
        }
      }
    }
  }
}
</style>